<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

         <el-card class="box-card">
            <el-row>
                <el-col>
                    <el-button type="primary" @click="tianjia">添加角色</el-button>
                </el-col>
            </el-row>

            <tree-table :data='cateGoods' :columns="columns" :selection-type='false'
                     :expand-type='false' border show-index index-text='#'>
                     <template slot="isOk" slot-scope="scope">
                       <i class="el-icon-error" v-if="scope.row.cat_deleted==false"
                            style="color:green;"></i>
                       <i class="el-icon-success" v-else style="color:red;"></i>
                    </template>

                    <!-- 排序开始 -->
                    <template slot="isNo" slot-scope="scope">
                          <el-button type="primary" plain size="mini">{{scope.row.cat_level}}级</el-button>
                    </template>
                    <!-- 操作开始 -->
                    <template slot="caoZuo" slot-scope="scope">
                         <el-button icon="el-icon-edit" type="primary"  size="mini">编辑</el-button>
                        <el-button  icon="el-icon-delete" type="success"  size="mini">删除</el-button>
                    </template>
            </tree-table>

            <!-- 分页功能开始 -->
             <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="params.pagenum"
                    :page-sizes="[5, 10, 15,20]"
                    :page-size="params.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>  

        <!-- 添加分类的弹出款 -->
        <el-dialog
            title="添加分类"
            :visible.sync="cateVisible"
            width="30%">
            
                <el-form :model="cateForm" :rules="rules" ref="cateFormRef" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="分类名称" prop="cat_name">
                        <el-input v-model="cateForm.cat_name"></el-input>
                    </el-form-item>

                     <el-form-item label="父级分类" >

                            <el-cascader
                                expand-trigger="hover"
                                :options="cateValue"
                                :porps="cateProps"
                                v-model="selectedKeys"
                                @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                 </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cateVisible = false">取 消</el-button>
                <el-button type="primary" @click="cateVisible = false">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            cateGoods:[],
            params:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            total:0,
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },
                {
                    label:'是否有效',
                     type: 'template',
                    template: 'isOk',
                },
                 {
                    label:'排序',
                     type: 'template',
                    template: 'isNo',
                },
                 {
                    label:'操作',
                     type: 'template',
                    template: 'caoZuo',
                }
            ],
            cateVisible:false,
            cateForm:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            rules:{},
            rules:{
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            },
            cateValue:[],
            cateProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            selectedKeys:[]
        }
        
    },
    created() {
        this.cateList()
    },
    methods:{
        async cateList(){
        const {data:res}=await this.$http.get('categories',{params:this.params})
        // console.log(res)
        if(res.meta.status==200){
            this.cateGoods=res.data.result
            // console.log(this.cateGoods)
            this.total=res.data.total
        }
        },
        handleSizeChange(newSize){
            this.params.pagenum=newSize
            this.cateList()
        },
        handleCurrentChange(newCurrent){
            this.params.pagesize=newCurrent
            this.cateList()
        },
        // 点击按钮,添加分类
        tianjia(){
            this.erji()
            this.cateVisible=true
        },
       async erji(){
        const {data:res}=await this.$http.get('categories',{params:{type:2}})
            console.log(res)
            if(res.meta.status==200){
                this.cateValue=res.data
            }
        },
        handleChange(){
            console.log(this.selectedKeys)
        }
    }
}
</script>

<style lang="less" scoped>

</style>
